package com.huluobo.a2212mdmdemo.demo

import android.util.Log
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Face
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp

/**
 *  Created by LC on 2025/5/22.
 */

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Demo01() {
    //声明状态,在compose中,所有可以改变的值都是有状态的,需要使用remember来声明,所有固定值都是无状态的可以直接声明
    // by 关键字,委托,不是直接创建对象,间接创建,类似延迟初始化
    // = 是直接赋值或者直接创建new出对象,声明的时候已经产生了对象
    var name by remember {
        mutableStateOf("")
    }

    var password by remember {
        mutableStateOf("")
    }

    var isShowPass by remember {
        mutableStateOf(false)
    }

    Column(Modifier.padding(20.dp)) {
        //普通输入框
        TextField(
            //输出的值
            value = name,
            //当值发生改变
            onValueChange = { name = it },
            //输入框的标签,类似hit文字,会展示到输入框的上方
            label = {
                Text(text = "请输入用户名")
            },
            //输入框中左侧图标
            leadingIcon = {
                Icon(imageVector = Icons.Default.AccountCircle, contentDescription = "")
            },
            //输入框右侧图标
            trailingIcon = {
                Icon(imageVector = Icons.Default.Lock, contentDescription = "")
            }
        )

        //带边框的输入框
        OutlinedTextField(
            value = password, onValueChange = { password = it },
            label = {
                Text(text = "请输入密码")
            },
            leadingIcon = {
                Icon(imageVector = Icons.Default.Lock, contentDescription = "")
            },
            trailingIcon = {
                Icon(imageVector = Icons.Default.Face, contentDescription = "", Modifier.clickable {
                    isShowPass = !isShowPass
                })
            },
            visualTransformation = if (isShowPass) VisualTransformation.None else PasswordVisualTransformation()
        )
    }
}